vue-cli4脚手架搭建一

涉及内容

html css javascript node.js npm webpack

2.9.6是常用版本

vue-cli4是基于webpack的

webpack是基于node.js的

npm:node package manager，是nodejs的包管理器，通常使用淘宝镜像;这是npmjs.org的一个镜像，由于在国内，网速相对国外快。该镜像每十分钟与官方同步一次。

下载nodejs并安装或者yum/apt-get安装

https://cdn.npm.taobao.org/dist/node/v14.4.0/node-v14.4.0-linux-x64.tar.xz

tar -xvf node-v14.4.0-linux-x64.tar.xz

sudo apt-get install nodejs

sudo apt-get install npm

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

$ cnpm -v
cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.5 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@10.19.0 (/usr/bin/node)
npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
linux x64 5.4.0-39-generic 
registry=https://r.npm.taobao.org

yarn是facebook公司用于替代npm的一个包管理器

sudo npm i yarn -g -verbose
sudo yarn config set registry https://registry.npm.taobao.org

$ yarn -v
1.22.4

安装vue-cli 3或4版本说明

本地安装会安装到当前目录

cnpm install @vue/cli

$ ls
node_modules

vue-cli 2版本的安装方式

npm install -g vue-cli

安装指定版本

2版本：cnpm install -g vue-cli@版本号

3及以上版本：cnpm install -g @vue/cli@版本号

正式安装

sudo cnpm install -g @vue/cli

安装vue-cli模块到/usr/local/lib/node_modules，并创建下面的链接（下面的链接是自动创建的，无须再重复创建），于是可以全局使用vue

[@vue/cli@4.4.6] link /usr/local/bin/vue@ -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js

$ vue -V
@vue/cli 4.4.6

创建项目

Babel转码器，把EC6/7代码转换为浏览器可以识别的编码

至少需要安装Babel和Router

vue create vue2

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

上下键移动光标，空格键选择或取消，回车键下一步

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router

路由模式分为历史模式和hash模式两种，hash模式url中有#号，history没有但需要代码中配置，2版本3版本为hash模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

配置是放在package中还是指定的配置文件里，按默认走

? Where do you prefer placing config for Babel, ESLint, etc.?
❯ In dedicated config files
In package.json

以后的模块是否按当前的模式搭建

? Save this as a preset for future projects? (y/N) N