Vue.js之使用vue-cli初始化项目

使用vue框架的时候，经常会用到vue的脚手架，那么怎么进行初始化呢？

一、安装步骤

step1、安装Node.js

• 首先需要下载并安装Node.js，下载地址：Node官网。
• 测试安装是否成功，打开cmd，使用 node -v，如果显示版本号则表示安装成功。
  

step2、安装vue-cli

• 使用vue-cli（脚手架）搭建项目，vue-cli是Vue官方提供的用于搭建基于 vue+webpack+es6项目的脚手架工具。
  GitHub地址：vue-cli

• 全局安装：-g 表示全局安装vue-cli

npm install -g vue-cli

• 如果安装较慢，可以使用淘宝镜像安装。

cnpm install -g vue-cli

step3、初始化项目

• 初始化基于webpack的模板项目，projectName为项目名称，可以自动生成目录及相关文件。

vue init webpack projectName

• 里面的一些配置

Project name  projectName(项目名称)
Project description 项目描述
Author 作者
Vue build  <standalone->runtime+Compiler(模板编译器)><runtime-小6kb>只有运行时，省略了模板编译过程(webpack用vue-loader去编译vue代码)。这个依赖与vue文件开发>
Install vue-router?
Use ESLint to lint your code?standard
Set up unit tests (Y/n) 需要不需要测试相关,一般不需要 no

如果需要使用ESLint规范和相关的unit test 和e2e，请输入yes，这样初始化出来的项目，会自动配置好对应的模块。

• 在初始化的过程中会询问一些相关的说明和配置，这些说明和配置会写入package.json文件中，会自动生成对应的模块。
  

step4、 下载项目依赖模块

• 定位到项目根目录，下载项目依赖的所有模块。

cd projectName
npm install 

step5、运行项目

• 定位到项目根目录下，使用命令：

npm run dev
image.png

• 使用命令运行项目，在浏览器中输入http://localhost:8080可访问。
  

目录说明

• 项目文件需要放到 src 文件夹下，相关的部分静态资源需要放在static文件夹下。
• 项目开发完成之后，可以输入 npm run build 来进行打包工作
• 打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
• 项目上线时，只需要将 dist 文件夹放到服务器就行了。