使用vscode进行vue.js项目搭建和打包

使用vscode进行vue.js项目搭建

vue.js是什么?

Vue.js（读音 /vjuː/, 相似于 view） 是一套构建用户界面的 渐进式框架。

1、vue.js环境安装

　　由于vue.js运行在node.js 的npm环境下,因此必须先安装node.js。

　　安装步骤：

　　一、node.js npm环境 Windows 安装包(.msi)

　　32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

　　64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

　　按照安装详细步骤进行安装：（详细步骤）

　　在cmd中查看安装版本

　　

 

　　备注：安装方式不仅这一种：也可以使用淘宝的npm镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org  便可安装npm镜像，之后再用到npm的地方直接用cnpm来代替就行了 。

　　2.安装好npm以后，而后安装全局vue-cli 脚手架工具，用于搭建项目基本框架（也就是各类基本的模版文件）

　　输入命令：cnpm install -g  vue-cli  

　　

　　等待安装成功,输入命令：vue   检测安装成功与否（如图为安装成功）

　　

　　3.安装彻底局脚手架后，建立项目vue init webpack vue_project(vue_project为项目名) 如图：

　　

　　在建立过程当中会询问的一些问题：

　　项目名称

　　项目描述

　　项目做者

　　Use ESLint to lint your code? 这个问题很是重要：就是是否使用EsLint 去规范的代码？也就是说若是你选择了Yes ，你的代码会很是的严格，不能多一个空格，不然会报错，因此最好选择No

　　而后等待建立完成

　　 

　　建立后的项目文件：

　　

　　4.vue-cli安装出来的项目模板间是相互依赖的，全部咱们须要进入项目中安装项目依赖。cd vue_project 回车 进入项目中(cd是进入的意思)

　　★★★ 此处需特别注意：从npm上安装依赖，即npm install虽然慢了点，可是安装的依赖包是彻底的，没有少文件。

　　如若从cnpm上安装依赖，即cnpm install 可能会致使最后安装的依赖包不完整。

　　★不建议从淘宝镜像上即cnpm安装依赖，可能会致使项目运行不了。

　 （出问题时能够试着二者都试试）

　　完成后你会发现项目中多了个node_modules文件，就是依赖包。

　　

　　操做完成以后，项目文件中会多出node_modules 文件夹，即这个文件就是项目依赖，如图：

　　　　

　　五、运行你的第一个vue项目

　　输入命令： cnpm run dev

　　

　　发布成功的查看地址就是：http://localhost:8082  能够直接在浏览器中查看

2、安装vscode 并将项目运行在vscode中

　　一、按照官方步骤安装vscode 

　　二、添加基本扩展

　　

　　三、打开项目文件夹

　　

　　并编辑index.html 

　　

　　

3、vue项目打包

　　

　　一、你们都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件能够打开，可是全部的js，css，img等路径有问题是指向根目录的，

　  　　查看config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的，此处配置能够修改视具体状况而定下面三种状况为配置值具体含义。

• ./ 当前目录
• ../ 父级目录

• / 根目录
• 根目录：在计算机的文件系统中，根目录指逻辑驱动器的最上一级目录，它是相对子目录来讲的；

　　　　它如同一棵大树的“根”通常，全部的树杈以它为起点，故被命名为根目录。以微软公司开发的Windows操做系统为例：

　　　　打开个人计算机（计算机），双击C盘就进入C盘的根目录。双击D盘就进入D盘的根目录

build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report }

若是项目有用到vue-router注意到src/router目录下的index.js文件里将

mode:'history',这行注释掉并在下一行配上base:'/'，base取值与assetsPublicPath一致

　　3.将打好的包（即dist文件夹）上传到服务器，并配置nginx能够访问到dist文件夹下的index.html便可

 文档内容参考：https://my.oschina.net/ljavastudent/blog/1819413