1. 全局安装脚手架

npm install -g vue-cli 

2. 初始化项目

vue init webpack my-project

Vue build 选择 Runtime-only 选项
Use ESLint to lint your code? 这个本应该应该yes, 但是作为个人开发者, 选择no比较方便
Should we run npm install for you after the project has been created? 选择 No, I will handle that myself

3. 安装依赖包

cd my-project    // 切换到项目根目录下
npm install        // 安装依赖包

4. 给webpack做简单的配置

1. 默认8080端口, 可以选择修改

1568166821268

2. 修改打包后的js和css为相对路径引入

build.js下的webpack.prod.conf.js中得output中添加publicPath。

5. 新建.prettierrc文件

{
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
}

6. 运行项目

npm run dev

7. 安装项目

开发过程中, 用到的包需要安装

npm i -D    // 工程构建(开发时、“打包”时)依赖 ;例:xxx-cli , less-loader , babel-loader...
npm i -S    // 项目(运行时、发布到生产环境时)依赖;例:vue, element-ui, react...

8. 常用的需要手动安装的扩展包

  • less

npm i less-loader less -D

  • 使jsx支持v-model

npm i babel-plugin-jsx-v-model -D

.babelrc"plugins"下添加"jsx-v-model"

9.非零开始

以上1-7是从零开始构建项目, 如果是已有项目拷贝复制, 肯定不能把 node_modules 目录一同复制, 所以我们可以复制除了node_modules以外的所有文件, 然后再执行 npm install 即可

标签: none

添加新评论