vue搭建脚手架vue-cli

一、环境搭建:
  1. 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

这里需要说明下,因为在官网下载安装最新node.js后,就已经自带npm(包管理工具)了。

这里需要说明下,因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。
  1. 安装淘宝镜像,打开命令行工具,把这个(npm install -g cnpm --registry=https://registry.npm.taobao.org)复制(这里要手动复制就是用鼠标右键那个,具体为啥不多解释),安装这里是因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候很很慢很慢超级慢,所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v,如下图,如果出现相应的版本号,则说明安装成功。

这里需要说明下,不安装不影响项目可跳过后面用到的cnpm换成npm即可。

  1. 安装webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。
  1. 安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

二、通过以上四步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目(如果你是最近安装的vue cli 3那就把下面的vue init webpack my-project 换成 vue create my-project即可)

1.创建一个基于 webpack 模板的新项目,要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。初始化一个项目:vue init webpack my-project,或使用:vue init webpack-simple my-project 初始化一个简单的项目,(注释:my-project为自定义项目名,但是需要主要的是“不能用中文”)。

vue init webpack my-project--------------------------- 这个是那个安装vue脚手架的命令
? Project name my-project--------------------------------项目名称
? Project description A Vue.js project -----------------项目描述?
Author--------------------------------------------------------- 项目创建者(不写为空)
? Vue build standalone? Install vue-router? Yes --- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Use ESLint to lint your code? No---------------------是否启用eslint检测规则,这里个人建议选no
? Set up unit tests No
? Setup e2e tests with Nightwatch
? No? Should we run npm install for you after the project has beencreated? (recommended) npm vue-cli · Generated "my-project".
To get started:----------------------------------------------- 这里说明如何启动这个服务
cd my-project
npm run dev



2.cd 命令进入创建的工程目录,首先cd my-project(这里是自己建工程的名字);

3.安装项目依赖:cnpm install,因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库),但是但是如果真的安装“个把”小时也没成功那就用:cnpm install 吧

4.安装 vue 状态管理 vuex,cnpm install vuex --save(这里可以不安装)。
创建完成的“my-project”目录如下:

下面我简单的说明下各个目录都是干嘛的:

5.启动“my-project”项目,在命令行输入:npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:


另:

1.npm 开启了npm run dev以后怎么退出或关闭?
ctrl+c
2.--save-dev
自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
3. --save-dev 与 --save 的区别
--save     安装包信息将加入到dependencies(生产阶段的依赖)
--save-dev 安装包信息将加入到devDependencies(开发阶段的依赖),所以开发阶段一般使用它

链接:https://www.jianshu.com/p/54c2359fadff

原文地址:https://www.cnblogs.com/yuanjia2717/p/11960402.html