如何快速搭建vue前端框架：

a、我们是在node环境下开发，借助webpack打包工具，安装vue-cli；

  npm install -g vue-cli

b、安装完之后就可以用vue命令了：

vue init webpack projectName   //注意：projectName 为全小写英文

•  

c、创建之后进入目录安装依赖：

    如果安装速度太慢。可以安装淘宝镜像，打开命令行工具，输入：
 npm install -g cnpm --registry=https://registry.npm.taobao.org

cd projectName
npm install

•  

网速慢的话可以使用yarn来安装，yarn一次性安装好，不用再次安装依赖，进入项目目录可直接运行，下面就是我用yarn安装之后的效果

使用npm init webpack 创建项目：

进入目录启动项目：

启动后的效果图：

再看一下配置文件中，webpack已经安装好，按需配置就好

然后安装axiso：

yarn add axios --save-dev 
或者 npm install axios --save-dev

•  

安装好之后在index.js中引入axios，将axios放到原型链上面，方便后面调用：this.$axios.get()

然后安装vuex   ，   我这里用的是npm install vuex --save-dev

yarn add vuex --save-dev

•  

安装好之后在 src 目录下创建store文件夹，在文件夹中创建store.js文件，在文件中引入vuex，现在变可以开发了。

我的安装了校验，双引号改成单引号，最后留空一行，不然报错

技术是一个不断积累的过程，还有其他开发的技巧，慢慢来。

 

来源：https://blog.csdn.net/weixin_43260760/article/details/84228024?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

 

补充：

 

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js

还有，如果本地调试项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ '（开始是 ' / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
我的端口没有被占用，直接成功（服务启动成功后浏览器会默认打开一个“欢迎页面”）：

注意：在进行vue页面调试时，建议下载一个vue-tool扩展程序。

打包上线

注意，自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后，可以输入 npm run build 来进行打包工作。

 

npm run build

另：

 

1.npm 开启了npm run dev以后怎么退出或关闭？
ctrl+c
2.--save-dev
自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
3. --save-dev 与 --save 的区别
--save     安装包信息将加入到dependencies（生产阶段的依赖）
--save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。
项目上线时，只需要将 dist 文件夹放到服务器就行了。