Vue.js进阶【4-0】用vue-cli

Vue.js进阶文章列表

vue-cli 2.0

安装cnpm

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

卸载webpack

npm remove webpack-dev-server
npm install [email protected]

安装 webpack 

cnpm install webpack -g

安装vue-cli

cnpm install vue-cli -g

 用vue-cli来构建项新目

vue init webpack my_vue_cli_project

使用功能cnpm安装运行

官方示例：https://cli.vuejs.org/guide/creating-a-project.html#vue-create

vue init webpack kitty-ui
  cd echarts_map_demo
  cnpm install (or if using yarn: yarn)
  cnpm run lint -- --fix (or for yarn: yarn run lint --fix)
  cnpm run dev

上面的链接告诉你非常详细的步骤，下面我们只给出最粗粒度的几个步骤，方便你以后拿来就用。

1 在一个空目录 shift + 右键 打开命令行

启动项目

cd my_vue_cli_project
npm run dev

5 浏览器访问

运行已经创建的项目

切换到已经创建的项目跟目录，依次执行下面的命令

# install dependencies
cnpm install # or yarn

# serve in dev mode, with hot reload at localhost:8080
cnpm run dev

# build for production
cnpm run build

# serve in production mode
cnpm start

vue-cli 3.0

1 升级到3.0

D:\Vue\element-ui>npm uninstall -g vue-cli --registry=https://registry.npm.taobao.org
D:\Vue\element-ui>npm install -g @vue/cli --registry=https://registry.npm.taobao.org

2 创建项目

# 安装
cnpm install -g @vue/cli
# 新建项目
vue create my-project
# 项目启动
cnpm run serve
# 打包
cnpm run build

添加包引用

1 引入echarts

在工程目录中执行下面的命令行即可添加包引用到vue-cli项目中

cnpm install echarts -S

在helloworld.vue文件中的script中加入import

import echarts from 'echarts'

2 在工程中引入jQuery会麻烦点：

只写这句是肯定不行的 npm install jquery --save     https://www.cnblogs.com/eyed/p/7850946.html

node 重新安装依赖模块

rm -rf node_modules
rm package-lock.json
cnpm cache clear --force
cnpm install