vue-cli(脚手架的搭建)

[email protected]TOC

vue-cli(脚手架的搭建)

安装vue-cli的新的体验,在已经有了node环境下的安装

1 安装 webpack

1.打开cmd命令窗口,输入‘npm i -g webpack‘
2.出现[email protected](版本号)表示成功

2 安装 webpack-cli(依赖4.0以上版本需要安装)

1.输入’npm install webpack webpack-cli -g‘
2.出现[email protected]成功(版本号)

3 全局安装vue-cli

1.npm install -g vue-cli
2.出现[email protected]成功
3.检查:vue -V(中间有空格,v大写),出现版本号2.9.6表示安装成功

4 初始化一个vue项目

1.在文件夹中打开cmd
2.vue init webpack project_name(project_name表示项目名字 随便取)。命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹。
3.Project name (baoge): -----项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)

  • Project description (A Vue.js project): ----项目描述,也可直接点击回车,使用默认名字
  • Author (): ----输入自己的名字
    接下来会让用户选择:
  • Runtime + Compiler: recommended for most users 运行加编译,选这个
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时
  • Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,y(要)
  • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的。n(不要)
  • Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试,n(不要)
  • Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ,n(不要)
    回答完毕后上图就开始构建项目了

4.安装依赖 npm install
vue-cli(脚手架的搭建)
5.启动项目 npm run dev (这算成功了,其实后面应该有端口号的,我设置的示8080,标准的应该是http:’'localhost:8080)
vue-cli(脚手架的搭建)
6.打开项目,应该出现这个
vue-cli(脚手架的搭建)