2020-12-23

最新推荐文章于 2024-05-22 20:44:17 发布

....不懂先生

最新推荐文章于 2024-05-22 20:44:17 发布

阅读量210

点赞数

分类专栏：前端文章标签： vue npm css vue.js html

本文链接：https://blog.csdn.net/hi454/article/details/111597593

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

头条项目前的基本准备

安装依赖包

//正常安装
npm install
//如果国内下载国外包还是太慢, 除了指向淘宝镜像外, 还可以加上使用下面的命令加速 很多时候报node-gyp
npm install --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/
//

启动

npm run start

4.启动成功提示
在这里插入图片描述
测试在浏览器中打开你链接解测试是否成功

http://127.0.0.1:3000/post

vue-cli 脚手架

一介绍
脚手架的作用就是将我们之前一个个慢慢安装慢慢调试的工具全部一次装好。
给我们马上开始开发
如果下载太慢
主要是 npm 默认是从国外服务器下载包，太不稳定了。建议切换成国内淘宝下载。
百度一下： npm 淘宝

npm config set registry https://registry.npm.taobao.org

二. 安装

@vue/cli (3.0 以上)
全局安装

npm install @vue/cli -g

调用命令是 vue create项目名

vue create hmtt-project

搭建项目

## 一. 前提, 脚手架工具

打开终端 (最好使用管理员模式)
全局安装 vue cli 3.x 以上版本，可通过 vue -V 查看。

 npm install @vue/cli -g

如果安装报错, 或者以前已经安装过其他版本(2.x) 可以先卸载 (两个版本之间有冲突)
终端当中运行以下命令, 再执行上一步安装

// 新版脚手架工具卸载命令
npm uninstall @vue/cli -g
// 或更旧版本脚手架工具卸载命令
npm uninstall vue-cli -g

二. 用脚手架工具创建项目

为了避免其他代码的干扰, 建议创建一个空文件夹用来放置之后做的项目
我们这个项目叫做头条这个文件夹名字也可以叫做 work / hmtt-projcet
在准备好的文件夹下面打开终端
使用命令创建项目 (其中 projectname 可以自己起, 不可以用大写)

vue create projectname

创建项目时的选项

按照这些选项答问题之后, 会自动创建项目, 不同机器环境可能稍有出入.
1.选一个预选项
在这里插入图片描述
选择需要的功能

选择 2.x 稳定版

是否 history 模式选 no
在这里插入图片描述
选择 css 预处理器

存放配置文件的地址

是否设为默认值
否

成功后运行项目

在这里插入图片描述
根据提示运行项目开发服务器
打开页面

工作好习惯

一个项目用一个 VS Code 打开，这样才能更好的利用 Vs Code 自带的源代码管理器，管理我们的代码。在这里插入图片描述

三. 把项目放到 git 上面

1 要有码云或者 github 的账号, 需要注册(建议是码云, 国内速度较快)

2 在码云创建一个仓库用来存放我们的项目代码

1新建仓库
在这里插入图片描述
2.填写仓库资料

3.有了下面这个页面就证明 ok 了, 如果出错,不要紧直接重新创建一个即可(不要钱无限量)

3将本地刚刚创建好的项目文件传到 git 上面去

将本地项目代码, 脚手架创建好的项目本来就有 git 系统, 如果没有, 可以在项目下面运行 git init 即可
确认所有代码都已经提交, 没有正在修改中的文件
将本地仓库推送到远程, 每个用户这两段命令不一样, 记得复制自己的就好了
如果以前没有用过 git 或者报错说没有设定名字和 email 直接按提示运行即可
运行第 3 步推送到远程时, 第一个终端命令没有提示是正常的

运行第二个的时候就会进行代码的推送, 有可能询问你的用户名和密码,

这个不能随意填写, 应该是你注册码云的时候的账号密码。

(注意,码云问用户名其实不是用户名而是你注册的手机号或者邮箱, 码云中用户名就像昵称随时可以改)
完成了上面的步骤, 刷新刚刚码云仓库的页面可以发现已经有你本地的代码了

4. 稳住别慌,

万一搭建脚手架或者创建仓库出了问题

如果出了问题, 建议多按照步骤尝试几遍

这有利于你的技术提升

但是不要让他影响到我们的项目开发

如果你在玩脚手架或者玩 git 的时候, 感觉一团乱

二. 修改 webpack 配置(如果需要)

你在这个脚手架里面找不到 webpack 的配置,
是因为脚手架把它封装起来了
假如要自定义 webpack 配置怎么办

创建 vue.config.js (脚手架的配置文件, 默认并不存在, 需要的时候创建)
配置 configureWebpack 属性

// vue.config.js
module.exports = {
  configureWebpack: {
    //添加或更改的webpack配置
  }
}

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被自动加载。

三. 长度尺寸单位 vw

vw 其实就是一个百分比单位，viewport width 的意思 视口宽度，把视口分成了 100 份。

四. 第三方依赖问题

或者怀疑第三方包出错或者不全 (比如装到一般卡死)
解决办法是重装项目依赖, 直接删除掉 node_modules 文件夹
重新 npm install

五. 如何开始一天的开发

因为是项目,所以每天会在同一个文件夹下面开发
使用 git 管理代码
我们有开发环境的命令, 和生产环境的命令
开发服务器的命令是 npm run serve
所以每天打开电脑, 开发之前先把服务器打开 (运行 npm run serve)

六. 图标库

地址: http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css
使用方式, 给标签 class 添加 iconfont 和下面显示的图标名,
这些图标可以设置字体大小和颜色
如
在这里插入图片描述

项目文件整理

现在脚手架显示默认页面, 也有一些预设样式和组件
我们需要清理干净开始我们的开发

一. 脚手架文件架构

在这里插入图片描述

二. 清理预设样式和页面

删除图标和 home 默认内容
删除默认样式 app.vue , 模板中只留下 router-view
重置公共样式根实例 app.vue (因为这是最外层的根实例)

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
    
a{
    color: inherit;  /* CSS 关键词：继承 */
}

a:hover{
    text-decoration: none;
}

ul,li,ol{
    list-style: none;
}

引入公共图标库

在 App.vue 根实例当中引入公共图标库, 供所有页面使用
/* 在 style 当中引入字体图标文件 */
@import url(‘http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css’);

....不懂先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-23

头条项目前的基本准备安装依赖包//正常安装npm install//如果国内下载国外包还是太慢, 除了指向淘宝镜像外, 还可以加上使用下面的命令加速很多时候报node-gypnpm install --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors///启动npm run start4.启动成功提示测试在浏览器中打开你链接解测试是否成功http://127.0.0.1:3000/postvue-
复制链接

扫一扫