vue 前端项目 搭建基础

新建vue项目

（1）理想状态下，IDEA系列编辑器会有新建vue项目的入口，按照常规的流程新建即可

（2）手动去新建一个vue项目流程如下：

前提：已安装node环境，安装cnpm则下载资源会比npm更快更稳定

可选项：npm i -g cnpm --registry=https://registry.npm.taobao.org

1、进入到目标路径

2、安装脚手架工具（vue-cli）

cnpm i -g vue-cli

3、查看是否安装成功

vue -V

4、项目安装

vue init webpack vuepro

提示目录已存在，是否继续：Y

Project name（工程名）:回车

Project description（工程介绍）：回车

Author：作者名

Vue build（是否安装编译器）:回车

Install vue-router（是否安装Vue路由）：回车

Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n

Set up unit tests（安装测试工具）：n

Setup e2e tests with Nightwatch（测试相关）：n

Should we run `npm install` for you after the project has been created? (recommended)：选择：No, I will handle that myself

 

5、初始化项目

（1）进入项目目录

（2）初始化项目

6、运行项目

cnpm run dev

浏览器打开：localhost:8080，即可打开vue项目

Ctrl+C退出运行

 

7、配置idea，在idea中打开项目进行开发的配置

File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认

File - Settings - Plugins：搜索vue，安装Vue.js

Run - Edit Configurations...：点击加号，选择npm，Name为Run，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了

继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。