使用vue-cli创建一个项目(一)

在创建项目之前首先要清楚自己的目的,达成目标需要用到哪些工具,这样就可以避免总是google或者baidu翻阅资料了。

一、目的:使用vue脚手架工具vue-cli创建项目

二、工具

1、npm -- node package manager(nodejs官方包管理工具)

作用:类似于商店,可以将别人的代码包引入自己的项目(这里的vue-cli和webpack)

2、webpack(打包工具)

作用:初始化项目(创建项目模板:自动整理项目结构,js模块化组件解析)、打包项目

* 补充:webpack4版本后已经将webpack-cli与其分开管理,所以可能需要单独安装,webpack-cli可以理解为使用webpack的一组命令。 

3、node

作用:为webpack提供依赖支持(vue-cli的资源包是基于node开发的)

三、执行过程

1、安装node.js v10-16.0(可以不在C盘,node.js会自动部署系统的环境变量)

2、选择一个盘建立项目文件夹

3、为了后续部署多个的VUE项目,全局安装webapck 和 vue-cli

      win + R \rightarrow  cmd

      npm install -g webpack

      webpack -v

      npm install --global vue-cli

      vue -V

4、cd 到项目文件夹下

      vue init webpack web(项目名称)

使用vue-cli创建一个项目(一)_第1张图片

5、初始化完成以后

使用vue-cli创建一个项目(一)_第2张图片

6、npm run dev

*7、补充

7.1

使用vue-cli创建一个项目(一)_第3张图片

在全局安装webpack后查询版本号出现了以上问题,提示在文件目录下需要安装webpack-cli(webpack在版本4以后已经将webpack和的cli分开管理),可以直接yes在当前文件目录下安装webpack-cli,也可以no然后去全局npm install webpack-cli -g,安装完成以后返回上面第四步。

7.2

有关npm install webpack 这一项,目前的vue-cli已经可以包含可以省略。个人在另一个测试过程中的图片如下:

使用vue-cli创建一个项目(一)_第4张图片

使用vue-cli创建一个项目(一)_第5张图片

vue-cli自带的webpack版本号如下

使用vue-cli创建一个项目(一)_第6张图片

如有错误,望多多指正。

你可能感兴趣的:(vue)