使⽤vscode进⾏vue.js项⽬搭建和打包
使⽤vscode进⾏vue.js项⽬搭建
是什么?
Vue.js（读⾳ /vjuː/, 类似于 view）是⼀套构建⽤户界⾯的渐进式框架。
⼀、vue.js环境安装
  因为vue.js运⾏在node.js 的npm环境下，所以必须先安装node.js。
  安装步骤：
  1、node.js npm环境 Windows 安装包(.msi)
  32 位安装包下载地址 :
  64 位安装包下载地址 :
  按照安装详细步骤进⾏安装：（）
  在cmd中查看安装版本
  备注：安装⽅式不只这⼀种：也可使⽤淘宝的npm镜像： npm install -g cnpm --registry=registry.  即可安装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
  然后等待创建完成
vscode代码规范
  创建后的项⽬⽂件：
  4.vue-cli安装出来的项⽬模板间是相互依赖的，所有我们需要进⼊项⽬中安装项⽬依赖。cd vue_project 回车进⼊项⽬中(cd是进⼊的意思)
  ★★★此处需特别注意：从npm上安装依赖，即npm install虽然慢了点，但是安装的依赖包是完全的，没有少⽂件。
  如若从cnpm上安装依赖，即cnpm install 可能会导致最后安装的依赖包不完整。
  ★不建议从淘宝镜像上即cnpm安装依赖，可能会导致项⽬运⾏不了。
　（出问题时可以试着两者都试试）
  完成后你会发现项⽬中多了个node_modules⽂件，就是依赖包。
  操作完成之后，项⽬⽂件中会多出node_modules ⽂件夹，即这个⽂件就是项⽬依赖，如图：
  5、运⾏你的第⼀个vue项⽬
  输⼊命令： cnpm run dev
  发布成功的查看地址就是：localhost:8082  可以直接在浏览器中查看
⼆、安装vscode 并将项⽬运⾏在vscode中
  1、按照官⽅步骤安装vscode
  2、添加基本扩展
  3、打开项⽬⽂件夹
  并编辑index.html
三、vue项⽬打包
  1、⼤家都知道使⽤npm run build进⾏打包，这个时候你直接打开dist/下的index.html，会发现⽂件可以打开，但是所有的js，css，img等路径有问题是指向根⽬录的，
  　查看config/index.js⾥的assetsPublicPath的字段，初始项⽬是/他是指向项⽬根⽬录的，此处配置可以修改视具体情况⽽定下⾯三种情况为配置值具体含义。
./
../ ⽗级⽬录
/ 根⽬录
根⽬录：在计算机的⽂件系统中，指的最上，它是相对⼦⽬录来说的；
    它如同⼀棵⼤树的“根”⼀般，所有的树杈以它为起点，故被命名为。以开发的为例：
    打开我的计算机（计算机），双击C盘就进⼊C盘的。双击D盘就进⼊D盘的根⽬录
build: { env: require('./v'), index: solve(__dirname, '../dist/index.html'), assetsRoot: path.r
esolve(__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: v.npm_config_report }
如果项⽬有⽤到vue-router注意到src/router⽬录下的index.js⽂件⾥将
mode:'history'，这⾏注释掉并在下⼀⾏配上base:'/'，base取值与assetsPublicPath⼀致
  3.将打好的包（即dist⽂件夹）上传到服务器，并配置nginx可以访问到dist⽂件夹下的index.html即可
⽂档内容参考：my.oschina/ljavastudent/blog/1819413

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。