目录
创建项目前应该搭建vue运行所需的各种环境，具体可参考我的另一篇博文：
https://blog.csdn.net/qq_42169450/article/details/115111725
命令行创建项目
一.@vue/cli3搭建
1.vue create 项目名称
项目名称不能有大写字母，否则会报错
E:\webstormProjects>vue create vueDemo
Invalid project name: "vueDemo"
Warning: name can no longer contain capital letters
E:\webstormProjects>vue create vue-damo1
Vue CLI v4.4.6
┌──────────────────────────────────────────┐
│ │
│ New version available 4.4.6 → 4.5.12 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features 2.创建项目后就会让我们选择模板
default (babel, eslint): 默认配置，只有Babel和eslint，其他的都要自己另外再配置
Manually select features: 手动配置
这里我们选择手动配置，也就是选择Manually这个
3.切换到某项按空格添加需要的模块
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing 这些模块对应的意思是：
**Babel：指转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等
**TypeScript：新增的选项卡
**Progressive Web App (PWA) Support：指模拟原生app
**Router：路由管理
**Vuex：vuex管理模式
**CSS Pre-processors：css预处理语言
**Linter / Formatter：代码规范
**Unit Testing：组件单元测试
**E2E Testing：端对端测试，模拟用户真实场景这里选择Router,Vuex,CSS Pre-processors
4.提示是否使用历史路由: 这种模式充分利用history pushState API 来完成URL跳转而无须重新加载页面;然后是选择css预处理语言，选择y
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 5.然后css的预处理，我选择的是stylus
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus 6.选择ESLint代码规范,这里选择正常模式
ESLint with error prevention only: 只进行报错提醒;
ESLint + Airbnb conf: 不严谨模式;
ESLint + Standard config: 正常模式;
ESLint + Prettier: 严格模式
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? 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 7.代码检查方式,何时对代码进行检测，这里选择报错时检测
Lint on save: 报错时检测
Lint and fix on commit(requires Git): 整理并固定提交时
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit 8.选择配置文件存放位置，这里选择保存再配置文件中
In dedicated config files: 保存在单独配置文件中
In package.json: 保存在package.json中
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json 9.是否在以后的项目中使用以上配置，选择否
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No完成以上后就会自动创建一个vue项目
然后就可以切到项目目录下，并运行项目了
创建的项目目录结构如下：
node_modules：这个文件夹里面是我们项目需要的一些依赖；
public：静态文件夹，这个文件夹中的资源不会被webpack编译，构建生产包的时候，会被直接拷贝一份；
assets： 是页面和组件中用到的静态资源，比如公共样式文件，字体文件，图片等，该文件夹与public的区别是：该文件夹中的资源会被webpack编译；
components： 文件夹中存放我们的组件；
router： 是路由的配置文件；
store： 是vuex的配置文件；
views： 文件夹中存放我们的页面；
App.vue： 这个文件是我们所有vue页面的顶层文件；
main.js： 是我们整个项目的入口文件；
.browserslistrc：文件用于给开发者设置浏览器版本的范围；
.editorconfig:编码配置文件
.eslintrc.js：eslint配置文件；
.gitignore：需要git忽略的文件；
babel.config.js：babel的配置工具；
package-lock.json：记录项目依赖中各个依赖之间的关系和版本，防止npm包中有不遵守“相同大版本号的同一个库包，其接口符合兼容要求”这一规范，导致项目运行报错；
package.json：项目的描述文件，包括项目名、依赖的版本、作者、命令、入口文件等信息。
README.md：项目的说明文档，项目介绍、License、一些命令（例如：启动命令、打包命令、单元测试命令等）二.vue-cli2搭建
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init安装完后，创建项目：可以一路回车自动会选择默认，也可以自定义输入
E:\webstormProjects>vue init webpack vue-demo2
? Project name vue-demo2
? Project description A Vue.js project
? Author 余杭杭 <yuhh31804@hundsun.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vue-demo2".
# Installing project dependencies ...
# ========================
生成的项目文件目录结构如下：
每个文件的作用：
1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、babelrc：babel编译参数
7、editorconfig：代码格式
8、gitignore：git上传需要忽略的文件配置
9、postcssrc.js：转换css的工具
10、index.html：首页入口文件，可以添加一些 meta 信息等、
11、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
12、README.md：项目的说明文档，markdown 格式@vue/cli3与vue-cli2的区别
创建项目 由vue init webpack 项目 变成了 vue create 项目
启动项目 由npm run dev 改成 npm run serve
移除了配置文件目录 config 和 build 文件夹，如果需要自定义配置，需要自己新建vue.config.js文件
移除了 static 静态资源文件夹，新增 public 文件夹，静态资源转移到public目录中，通过/xx.xx可以直接访问，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
安装项目时会自动下载node-model文件夹
webstorm创建项目：
简单明了，第一行项目路径和名称，第二行node解释器位置,第三行vue脚手架位置
vue GUI创建项目
vue cli3支持使用图形界面创建项目，具体操作如下：
输入命令：vue ui
E:\webstormProjects>vue ui
🚀 Starting GUI...
🌠 Ready on http://localhost:8000自动跳转到浏览器中
左下角‘...更多’进入项目管理器，选择目录新建项目：
按步骤一步一步选择项目配置：
项目创建完后可以继续添加项目所需的依赖或插件，如axios,elementui等
扫一扫
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
