新建Vue+idea项目

ゝ一纸荒年。 2022-01-25 18:31 344阅读 0赞

1.下载对应本机环境安装 nodejs 默认NPM已经集成

> https://nodejs.org/zh-cn/

打开cmd直接输入测试是否安装成功

node -v 
    npm -v

2.安装淘宝镜像。

打开cmd直接输入：

> npm install -g cnpm –registry=https://registry.npm.taobao.org

3.安装webpack 。

> cnpm install -g webpack

4.安装vue

> cnpm install -g vue

5.安装 vue-cli。

> cnpm install -g vue-cli

6.安装 element-ui。

> cnpm install -g element-ui -S

7.安装 mockjs 演示数据安装(选择安装)

> npm install mockjs

8.环境安装完毕 现在可以创建一个项目。

选择项目所在文件夹 shift+右键 选择在此处打开命令窗口

项目创建命令：vue init webpack vue-projectname。

projectname–项目文件夹的名称(名字不能用中文)，这个vue-projectname文件夹会自动生成在你跳转到的工作目录中。

> vue init webpack vue-projectname

提示目录已存在，是否继续：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

注意：安装过程中，需要自行输入项目名称，描述，作者等等, 按照提示操作。

9.选择项目所在文件夹 shift+右键 选择在此处打开命令窗口 运行命令cnpm install 安装依赖包。

> cnmp install

10.启动测试项目是否安装成功。

> cnpm run dev

注意：打开config目录下的index.js 默认是8080端口 可以修改为你想要的端口号

11.生产环境部署。选择项目所在文件夹 shift+右键 选择在此处打开命令窗口 运行命令

> npm run build

注意：dist 下生生成的文件就是我们要部署的文件

#### 四、配置idea ####

1.  File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认;
2.  File - Settings - Plugins：搜索vue，安装Vue.js;
3.  Run - Edit Configurations…：加号，选择npm，Name为Dev，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。
4.  Run - Edit Configurations…：加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。

#### 五、修改项目配置 ####

修改/config/index.js文件，找到

port: 8080
    修改为
    port: 8070

productionSourceMap: true
    修改为
    productionSourceMap: false

修改/build/webpack.base.conf.js文件，找到

module.exports = {
      entry: {
        app: './src/main.js'
      },
    修改为
    module.exports = {
      entry: {
        app: ['babel-polyfill', './src/main.js']
      },

最后在src/main.js中加入

import 'es6-promise/auto'
    import promise from 'es6-promise'
    import Api from './api/index.js'
    import Utils from './utils/index.js'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.prototype.$utils = Utils;
    Vue.prototype.$api = Api;
    Vue.use(ElementUI);

这样，一个差不多完整的vue项目就ok啦，并且可以在idea中编辑和运行。

注：使用static里的文件尽量使用绝对路径，如/static/image/background.png

使用src里的文件则尽量使用相当路径。

#### 六、相关技术： ####

vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。

element：基于vuejs2.0的ui组件库。

vue-router：一般单页面应用spa都要用到的前端路由。

vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

##### 附（我的vue项目结构）： #####

src文件夹

├── App.vue                      // APP入口文件
    ├── api                          // 接口调用工具文件夹
    │   └── index.js                 // 接口调用工具
    ├── components                   // 组件文件夹
    ├── frame                        // 子路由文件夹
    ├── main.js                      // 项目配置文件
    ├── page                         // 页面组件文件夹
    ├── router                       // 路由配置文件夹
    │   └── index.js                 // 路由配置文件
    ├── style                        // scss 样式存放目录
    │   ├── base                     // 基础样式存放目录
    │   │   ├── _base.scss           // 基础样式文件
    │   │   ├── _color.scss          // 项目颜色配置变量文件
    │   │   ├── _mixin.scss          // scss 混入文件
    │   │   └── _reset.scss          // 浏览器初始化文件
    │   ├── scss                     // 页面样式文件夹
    │   └── style.scss               // 主样式文件
    └── utils                        // 常用工具文件夹
         └── index.js                // 常用工具文件

static文件夹

├── css                          // css文件夹
    ├── js                           // js文件夹
    ├── image                        // 图片文件夹
    └── font                         // 字体文件夹

scss引入方法，例