【VUE入门】(一) 使用脚手架创建vue项目

一、使用@vue/cli脚手架创建项目(推荐)

1.首先确保已安装node

可以参考：安装node和webpack

验证一下

node -v
npm -v

2.安装VUE脚手架工具

Vue CLI 的包名称已经由 vue-cli 改成了 @vue/cli。如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

安装时可以指定版本号，默认安装的是4版本。vue-cli3 和vue-cli4的安装：

npm install -g @vue/cli
npm install -g @vue/cli@版本号

3.使用vue create创建vue项目

如果是创建老结构的项目，需要先安装vue桥接工具，然后使用vue init webpack命令来创建项目。

#vue桥接工具【创建老结构的项目需要安装vue桥接工具】
npm install -g @vue/cli-init

#创建项目
vue init webpack hello-world

如果创建新结构的项目，直接使用vue create命令就可以了。

vue create hello-world

 

这里以新结构项目为例

提示选择预设配置：

• 默认的vue2配置：含有了babel和eslint
• 默认的vue3配置：含有vue 3，babel，eslint
• 手动选择

我们还是选择手动配置吧。注：按空格键选择，a键全部选择，i键反转选择。

说明：

Babel：es6 转 es5
Router：路由
Vuex：数据容器，存储共享数据
CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
Linter / Formatter：代码格式校验

 

然后终端依次会提示：

1)

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

选择vue.js的版本，2.x还是3.x版本。根据实际情况选择。

2)

? Pick a linter / formatter config:
   ESLint with error prevention only
   ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

选择代码格式校验工具。这里选择Standard选项。

3)

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save               // 保存就检查。
 ( ) Lint and fix on commit    // 当 fix 或 commit 时检查

可以两个都选上，更严谨。

4)

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

你喜欢把Babel, ESLint等的配置放在哪里?

• In dedicated config files：分别保存到单独的配置文件
• In package.json：保存到 package.json 文件中

建议选择In dedicated config files，即保存到单独的配置文件，方便我们做自定义配置。

5)

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

是否将保存本次的配置，以便于将来的项目使用。根据自己的喜好配置。

 

4.运行项目
这时项目初始化完成了。终端提示，接下来的操作如下，照做即可。

cd hello-world
npm run serve

浏览器输入：http://localhost:8080

 

二、使用vue-cli脚手架创建项目(已过时)

1.首先确保已安装node

可以参考：安装node和webpack

验证一下

node -v
npm -v

2.安装VUE脚手架工具vue-cli

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

npm install -g vue-cli

安装成功验证：
vue -V(大写)

3.使用脚手架构建vue项目

使用脚手架来直接生成项目结构。

vue init webpack [项目名]

然后终端依次会提示：
? Project name (my-project)
是否使用项目名?是，回车。

? Project description (A Vue.js project)
项目描述。回车。
? Author (fungleo <web@fengcms.com>)
输入作者。回车。

? Vue build (Use arrow keys)
Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -
render functions are required elsewhere
是否安装编译器？是，回车。

? Install vue-router? (Y/n)
是否安装 vue-router？是，回车。

? Use ESLint to lint your code? (Y/n)
是否需要使用 ESLint 来检查你的代码？是。回车。

? Pick an ESLint preset (Use arrow keys)
Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)
需要使用哪种风格来检查代码？选择第一个Standard。直接回车。

? Setup unit tests with Karma + Mocha? (Y/n)
是否安装测试功能？【No】,输入n，回车

? Setup e2e tests with Nightwatch? (Y/n)
还是关于测试的内容，我们还是输入【n】，回车。
?xxxxxx npm还是yarn

4.运行项目
这时项目初始化完成了。终端提示，接下来的操作如下，照做即可。

cd [项目名]
npm run dev

浏览器输入：http://localhost:8080