深圳专门做网站的公司有哪些,茌平网站建设道气钻,.net flash网站模板,天津平台网站建设设计首先我搭建vuewebpackvue-strapvue-routesass时#xff0c;我用的是直接在项目中的package.json中的“devDependencies”直接将直接需要的一些插件写上。然后用“npm install”的方式。1、首先你要安装好nodejs。2、新建项目#xff0c;在新建的项目vue中打开输入#xff1a…首先我搭建vuewebpackvue-strapvue-routesass时我用的是直接在项目中的package.json中的“devDependencies”直接将直接需要的一些插件写上。然后用“npm install”的方式。1、首先你要安装好nodejs。2、新建项目在新建的项目vue中打开输入“npm init --yes”生成package.json。3、在package.json中的“devDependencies”加上直接所需的插件。在windows7中可以直接输入“npm install”但不知道为什么windows10中有一些不可以用。可能是我环境变量配置过的原因。但我们也可以用npm的方式下载到本地下面我会具体说的。在package.json可以配置{/*以下的所有注释在package.json都应该去掉否则会报错。在windows7中可以直接用但不知道为什么windows10中不就可以用。可能是我环境变量配置过的原因*/name: ex1,//名字但绝对不能是webpackversion: 1.0.0,description: vue-ex,//描述随便dependencies: {},devDependencies: {babel-cli: ^6.10.1,babel-core: ^6.14.0,babel-loader: ^7.0.0,babel-preset-es2015: ^6.9.0,babel-preset-stage-0: ^6.5.0,babel-register: ^6.18.0,browser-sync: ^2.18.2,css-loader: ^0.25.0,//加入css文件的加载。ejs-compiled-loader: ^2.1.1,element-ui: 1.2.9,//前端样式和下面的vue-strap(即bootstrap样式)两者选其一extract-text-webpack-plugin: ^1.0.1,file-loader: ^0.9.0,glob: ^7.0.6,gulp: ^3.9.1,gulp-file-include: ^1.0.0,html-loader: ^0.4.3,html-webpack-plugin: ^2.28.0,node-sass: ^3.7.0,raw-loader: ^0.5.1,sass-loader: ^4.0.2,//加入sass文件的加载。可以直接读取sass文件scss-loader: 0.0.1,style-loader: ^0.13.1,//用来插入tween.js: ^16.6.0,url-loader: ^0.5.7,vue: 2.2.6,vue-loader: ^10.0.2,vue-resource: ^1.0.3,vue-router: ^2.4.0,vue-style-loader: ^1.0.0,vue-strap:1.1.40,//前端样式和下面的element-ui两者选其一vue-template-compiler: 2.2.6,vuex: ^2.0.0,webpack: ^3.0.0,//webpackwebpack-dev-server: ^2.4.5},scripts: {test: echo \Error: no test specified\ exit 1,dev: webpack-dev-server --hot --inline},author: shi,license: ISC}在公司window7的老电脑上没有问题然后在家中的windows10的新电脑中遇到了2个问题1、“Windows_NT 10.0.15063”是由于windows10默认是不用管理员权限打开PowerShell的所以我们只有用快捷键“winx”然后选择管理员就行。2、“Cant find Python executable python, you can set the PYTHON env variable.”这个问题就已经说明c下面没有python。然后我们只要到网上找一个python27的安装安装到C盘下就行。然后在环境变量-》系统变量-》Path中设置一下路径进行。然后再运行“cpm install”安装好了。但这里安装好的webpack只是在项目中本地安装了作用与“npm install webpack --save-dev”一致。本来想尝试官网推荐本地安装但本地安装好了运行“webpack -h”一直说webpack不是内部命令。没有办法只能再安装全局了“npm install webpack -g ”。如果有大大知道本地安装好了之后怎么使用的请务必交一下我。然后在安装全局的时候也遇到了一个问题由于windows10默认一般都不是管理员权限安装的的所以我安装的时候一直都安装在了“C:Users用户名AppDataRoamingnpm”这个路径下面。由于它不是全局环境安装好了之后运行“webpack -h”也一直报“webpack不是内部命令”。这只是它没有安装在全局下的原因只要将其在环境变量中设置成全局的就行。但我的nodejs是安装在D盘的我想所有的npm安装的都存在到d中对应的nodejs文件中。下面的操作1、首先nodejs中有“node_cache”和“node_global”这两个文件就是之后原来存放npm下载的东西的。然后打开cmd窗口npm config set prefix D:\Program Files\nodejs\node_global、npm config set cache D:\Program Files\nodejs\node_cache2、进行环境变量的设置“用户变量”-》“Path”3、系统变量中新建一个“NODE_PATH”4、系统变量中“Path”将画红线的去掉(我的之前加过所以去掉如果没有的话就不用去掉了)二、下载插件到项目本地的语句首先要安装babel因为要将es6转成es5npm install --save-dev babel-cli、npm install --save-dev babel-preset-es2015、npm install --save-dev babel-preset-stage-0、npm install --save-dev babel-loader安装browser-sync浏览器同步工具。简单来说就是当你保存文件的同时浏览器自动刷新网页省去了手动的环节大大的节省了开发时间。npm install --save-dev browser-sync安装css-loadernpm install --save-dev css-loader安装html-webpack-plugin可以用来设置页面模板简化了HTML文件的创建以便为webpack包提供服务。这对于在文件名中包含每次会随着变异会发生变化的哈希的webpack bundle尤其有用。npm install html-webpack-pluginejs-compiled-loader因为HtmlWebpackPlugin插件并不具备ejs模板语言所有的功能其中一个就是不能识别语句这时需要安装一个ejs-compiled-loader。npm install ejs-compiled-loader好了到这里在到cmd运行“npm install webpack -g”就可以正常了下载了下载后“webpack -v”可以得到版本。接下来我们尝试一下在vue中新建文件“index.html”、“index.js”、“webpack.config.js”。vue ex1document.write(hello world);//index.js//webpack.config.jslet path require(path);let webpack require(webpack);module.exports {entry: ./index.js,output: {path: path.join(__dirname, dist), //输出目录的配置模板、样式、脚本、图片等资源的路径配置都相对于它filename: bundle.js},module: {rules: []}};然后cmd中运行“webpack”会生成一个dist文件夹和一个“dundle.js”文件。运行index.html,到此第一天的环境搭建就完成了。
