从零开始搭建一个vue.js的脚手架

 

1.Node.js（JavaScript运行环境）安装 
2.Vue.js安装 
3.脚手架搭建 

 

4.项目文件描述

 

1.Node.js安装

• 下载安装
• 测试

 

下载安装

点击下载: Node下载 根据自己电脑系统安装，一直点下一步即可

 

测试

Windows+R快捷键打开cmd窗口，输入node -v出现版本号，即安装成功！

2.Vue.js安装

使用NPM安装，默认安装到C盘；

—NPM: NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

由于 NPM 安装速度慢（服务器在国外），这里使用淘宝的镜像及其命令 cnpm 
安装淘宝的镜像： 
打开cmd命令框，输入 
npm install -g cnpm –registry=https://registry.npm.taobao.org 
在命令框输入 
cnpm install vue 
好了，vue.js安装完毕

3.脚手架搭建

• Vue-cli安装
• 搭建测试

Vue-cli安装 
在cmd命令框输入 下放代码全局安装vue-cli(默认安装到c盘，在其他任何盘建立新项目都可以用，默认只安装一次就可以)
cnpm install -g vue-cli

进入项目盘，我们init命令建立项目模版
vue init webpack test

 

进入test文件夹 
cd test 
安装依赖 
cnpm install 
启动 
npm run dev

 

 

4、Vue CLI 2 升级至 Vue CLI 3

npm uninstall vue-cli -g

npm install -g @vue/cli

 

Vue CLI 3 在新文件夹下创建项目 vue create my-project

自己切换到自己到目录下，新建项目，vue create 项目名

会让你选择默认（default）还是手动（Manually），按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了
这里我现在手动

选择配置，看个人项目需求

 

空格键是选中与取消，A键是全选

TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

我的项目选择项如下图：

css的预处理

代码格式化检测

第一个是保存就检测，第二个是 fix 和 commit 的时候检查

配置文件存放地方，第一个是独立文件夹位置，第二个是在package.json文件里