2、前端笔记-Vue创建项目

Vue2.0 项目

1、安装Vue Cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2、查看Vue版本

vue --version

3、如果需要升级

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

4、项目依赖

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

5、拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

6、创建Vue2.0项目

vue init webpack 项目名

7、运行项目

npm run dev

Vue3.0 项目

1、安装同上

......

2、创建项目

vue create 项目名

图形化创建

vue ui

3、运行项目

npm run serve
# OR
yarn serve

4、安装SASS

npm i node-sass --save-dev
npm install sass-loader@7.3.1 --save-dev

不要使用一条命令npm i --save-dev node-sass sass-loader
因为最新安装的sass-loader是8.0,会报错!

如果出现报错,可能是node版本所致，可以执行
npm install
npm rebuild node-sass
npm update
npm run serve

以上这两个步骤,即可在项目里使用sass(scss)! 注意：不需要在build文件夹下的webpack.base.conf.js的rules里面添加配置! 因为最新的vue-cli已经是默认配置好sass的（在build/util.js里），所以如果再在webpack里配置会重复，因此在main.js引入scss文件时会报错，也就是所只要安装了sass就行，什么都不用配置了!

5、卸载依赖

1卸载
npm uninstall XXX --save

2一般安装
npm i element-ui --save

3安装制定版本
npm install jquery@3.0.1 --save

常见依赖

1、按需加载插件 dynamic-import-node

解决 vue热加载编译速度慢问题，引入按需加载插件 dynamic-import-node

命令：

//安装命令
npm install babel-plugin-dynamic-import-node -D

配置：
vue-cli3：修改babel.config.js文件 （vue-cli3）
vue-cli2：.babelrc文件里添加配置dynamic-import-node

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    'env': {
        'development': {
          'plugins': ['dynamic-import-node']
        }
    }
}