vue创建新项目的具体步骤
程序员文章站
2022-05-02 19:02:42
...
1,安装node
- 下载地址:https://nodejs.org/en/
- 左侧 LTS 版本为稳定版,建议下载;右侧 Current 为最新版,有些新功能可能会出现 bug。
2,安装cnpm
npm install -g cnpm –registry=https://registry.npm.taobao.org
- 注:因为npm安装插件是从国外服务器下载,受网络影响大,可能会出现异常,所以安装cnpm备用
3,安装vue-cli脚手架
- 安装:
cnpm install -g vue-cli
4,创建vue项目
- 创建项目:
vue init webpack projectName
5,安装依赖
- 进入到项目目录:
cd projectName
- 安装依赖:
cnpm install
- 运行项目:
npm run dev
6,eslint配置(.eslintrc.js文件)
- 请参考:http://blog.csdn.net/m_wolf/article/details/79409557
- 去除eslink对单个js文件的语法校验,在.js文件第一行添加:
/* eslint-disable */
7,Vue 路径配置
修改 build 下的 webpack.base.conf.js 文件:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 以下为自定义路径,引用例:import { getName } from 'utils/index'
'components': path.resolve(__dirname, '../src/components'),
'router': path.resolve(__dirname, '../src/router'),
'utils': path.resolve(__dirname, '../src/utils')
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
7,Vue 设置 title 标题栏图标及文字
请参考:http://blog.csdn.net/M_wolf/article/details/79481885