安装Vue-cli项目

目录

步骤说明

检查

安装

版本卸载

构建项目

运行项目

目录文件

---

步骤说明

检查

检查软件是否安装:

node -v

npm  -v

vue -V

webpack -v

cnpm -v

没有出现版本号表示未安装。注意vue -V里的V要大写。

安装

可通过下载node.js安装包来安装node.js和npm。

全局安装webpack方法：

npm install webpack -g

全局安装vue-cli脚手架搭建工具：

npm install vue-cli -g

安装npm的国内镜像cnpm：

npm install -g cnpm --registry=http://registry.npm.taobao.org

安装完成后就可以用cnpm代替npm来安装依赖包了。

版本卸载

如果Vue版本不对，需要先卸载vue，再进行安装。

卸载1.x或2.x版本的vue-cli:

npm uninstall vue-cli -g

卸载3.x的vue-cli:

npm uninstall -g @vue/cli

查看vue-cli的1.x或2.x版本号列表：

npm view vue-cli versions --json

查看vue-cli的3.x版本号列表：

npm view @vue/cli versions --json

安装指定1.x或2.x版本号的vue-cli：

npm install -g vue-cli@版本号

这里如果省略“@版本号”，则会下载2.x的最新版【2.9.6】。

安装指定3.x版本号的vue-cli：

npm install -g @vue/cli@版本号

构建项目

在存放新项目的目录下运行：

vue init webpack 项目名称

然后会出现一些提示，其中有的选项并不是鼠标点击输入文本，而是通过键盘的上下方向键来选择，再通过Enter键确认的。

其中的Use ESLint to lint your code? 建议输入选择No，因为ESLint对代码标准格式检查很严格，可能多个空格或者少个空格都报错【可通过修改配置项降低严格检查的标准】。如果不是快速开发项目的初学者，可以选择Yes，方便加强对语法规范的理解。

在项目目录下，可以看是否有node_modules文件夹及其中是否有项目需要的依赖包资源，没有的话可以通过如下命令安装项目所需的依赖：

cnpm install

安装完后可以在通过检查版本来查看是否已安装成功。

运行项目

在项目目录下，运行命令：

npm run dev

如果是Vue3.x，那么可能需要运行命令：

npm run serve

具体应该运行哪个命令，可以去查看项目目录下package.js里"scripts"配置项中"vue-cli-service serve"的配置名是"dev"还是"serve"【可以手动更改】。

运行命令成功后，在命令行界面就应该看到类似如下的信息：

根据显示的链接，在浏览器地址栏里访问就应该能看到如下类似的页面：

目录文件

├─build 构建静态脚本，存放webpack对一些项目运行相关文件的配置。

│      build.js 生产环境构建脚本。

│      check-versions.js 检查npm，nodejs版本。

│      logo.png

│      utils.js 构建相关工具方法。

│      vue-loader.conf.js 配置了css加载器及自动添加前缀。

│      webpack.base.conf.js webpack基本配置。

│      webpack.dev.conf.js webpack开发环境配置。

│      webpack.prod.conf.js webpack生产环境配置。

│      webpack.test.conf.js

├─config 项目配置目录，存放webpack对一些变量的配置。

│      dev.env.js 开发环境变量。

│      index.js 项目配置文件。

│      prod.env.js 生产环境变量。

│      test.env.js

├─node_modules npm加载的项目依赖模块。

├─src 源码目录，写代码就在这里写。

│  │  App.vue 根组件。

│  │  main.js 入口js文件。可用require.context全局注册通用组件。

│  │  

│  ├─assets 资源目录，图片会存在这里。

│  │      logo.png

│  │      

│  ├─components 组件目录。

│  │      HelloWorld.vue

│  │      

│  └─router 前端路由目录。

│          index.js

├─static 存放html、css等静态资源的目录。

│      .gitkeep

├─test 测试插件目录。

│  .babelrc babel的配置文件。

│  .editorconfig 文本配置，如html、css、js等文本代码的编码规范。

│  .eslintignore 约束代码规范，说明那些文件不需要约束。

│  .eslintrc.js eslint配置文件。

│  .gitignore 在上传到github时，哪些文件不需要上传。

│  .postcssrc.js 添加浏览器私有前缀文件。

│  index.html 项目入口页面。

│  package-lock.json 记录node_modules依赖的真实版本。

│  package.json 配置项目的基本信息和依赖的大概版本。

│  README.md 项目的说明书。