vue-cli3.x和Nuxt.js项目搭建

vue-cli3.x项目搭建

一.安装Node

vue cli需要Node.js 8.9或更高版本。

二.安装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

三.命令变化

vue create --help

四.创建项目

进入某个硬盘打开终端创建项目

vue create project-name       // project-name为项目名称

五.选择配置

屏幕快照 2019-04-08 下午2.38.24.png

my-default 是原来保存好的模版
default 是使用默认配置
Manually select features 是自定义配置

选择最后一个自定义配置，就会显示如下：

屏幕快照 2019-04-08 下午2.42.28.png

点击回车之后就需要选择具体配置
(1)选择css预编译，这里可以选择SCSS/SASS

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  > SCSS/SASS
  LESS
  Stylus

(2)语法检测工具，这里选择ESLint + Standard config

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

(3)选择语法检查方式，选择保存就检测

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? 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)接下来会问你把babel、postcss、eslint这些配置文件放哪，这里随便选，可以选择独立文件夹

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
  In package.json // 放package.json里

(5)确定后，下载依赖模块

六.运行项目

进入安装好的项目，运行

npm run serve

参考文章：https://www.cnblogs.com/qq1272850043/p/9812421.html
https://www.jianshu.com/p/6307c568832d

Nuxt.js项目安装

完全按照这里去做，如果里面手动选择一些配置，我发现有时候会报错，可能因为是内网有些插件无法下载导致的：首先进入需要创建项目的硬盘，然后按照下面的地址去做https://github.com/nuxt/create-nuxt-app
或者下面这种方式，可以实现同样的效果

打开终端进入某个硬盘

使用如下命令一步搭建项目

vue init nuxt-community/starter-template testPro     // testPro为项目名称

需要进一步输入以下信息

Project name (testPro) test-pro       --输入项目名称，回车
Project description (Nuxt.js project) --项目描述，直接回车即可
Author syf                                         --输入作者姓名，回车即可

进入新建的项目打开终端，安装依赖包

npm install

启动项目

npm run dev

参考文章：https://www.cnblogs.com/shenyf/p/8352573.html