vue从零到项目创建

1 安装nodeJS、VScode

  安装好nodeJS后，默认安装好npm

2 改变nodeJS全局安装模块的默认目录

  npm config set prefix "D:\nodeJS\node_global"
  npm config set cache"D:\nodeJS\node_cache"

3 设置系统环境变量

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，如果不配置以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会装到c盘

  在用户变量path中将 C:\user...\npm 修改为 D:\nodeJS\node_global

为了使nodeJS引擎能够找到需要的模块，

  在系统环境变量中添加NODE_PATH,输入路径 D:\nodeJS\node_global\node_modules

4 将npm的registry地址改为淘宝镜像

  npm config set registry https://registry.npm.taobao.org

5 安装Vue和vue-cli3

  npm install vue -g
  npm i -g @vue/cli

6 创建项目

  vue create 项目名称

7 配置相关文件夹别名

在项目根目录新建vue.config.js文件，并写入

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                //'src': '@', 默认已配置
                'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views'
            }
        }
    }
}

tips

设置vue文件template模板

安装 Vetur 和 VueHelper 插件

文件-->首选项-->用户片段-->输入vue后回车打开vue.js文件，添加如下代码

"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" };",
" }",
"}",
"</script>",
"",
"<style lang='less' scoped>",
"",
"</style>"
],
"description": "Log output to console"
}

使用less需执行 npm install --save-dev less-loader less