欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 
    vue创建新项目的具体步骤

5,安装依赖

  • 进入到项目目录:cd projectName
  • 安装依赖:cnpm install
  • 运行项目:npm run dev

6,eslint配置(.eslintrc.js文件)

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